<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Franklin Capital Corporation</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="container">
            <header>
                <h1><img src="images/Franklin-Capital-Corporation-logo.png" alt="Franklin Capital Corporation"  />Franklin Capital Corporation </h1>
                <nav>
                    <ul>
                        <li><a href="#" class="first selected">Home</a></li>
                        <li><a href="#">Make a Payment</a></li>
                        <li><a href="#">Auto Pay Setup</a></li>
                        <li><a href="#">View History</a></li>
                        <li><a href="#">Manage Account</a></li>
                    </ul>
                </nav>
                <form id="search" method="post" action="">
                    <input type="text" value="Search" />
                    <span></span>
                    <button type="submit">Go</button>
                </form>
            </header>
            <div id="content" class="inner">
                <h3 class="panel_h3_tag_light"><strong>Password</strong> Recovery</h3>
                <div class="whitePanelBox"><p>This page will help you recover your FCC <strong>Password</strong>. You will need your <strong>Account Number</strong> to complete this process. </p></div>
                <form method="post" action="#" id="recoverPassword">
                    <ul>
                        <li>To help us verify your identity and keep your account information secure, please enter the following information.</li>
                        <li><label>Account Number</label><input type="text" class="textBox" /><a href="#" class="alink">Find Account Number</a></li>
                        <li><label>Security Question 1</label>

<select name="securityQuestion1">
                        <option value="Question A<">Question A</option>
                        <option value="Question B<">Question B</option>
                        <option value="Question C<">Question C</option>
                        <option value="Question D<">Question D</option>
                        <option value="Question E<">Question E</option>
                    </select>

                        </li>
                        <li><label>Security Question 2</label>
                        
                        <select name="securityQuestion2">
                        <option value="Question A<">Question A</option>
                        <option value="Question B<">Question B</option>
                        <option value="Question C<">Question C</option>
                        <option value="Question D<">Question D</option>
                        <option value="Question E<">Question E</option>
                    </select>
                        </li>
                        <li><label>Old Password</label><input type="password" class="textBox pass" /></li>
                        <li><label>New Password</label><input type="password" class="textBox pass" /><span>Can be the same as old password</span></li>
                        <li><label>Re-Enter password</label><input type="password" class="textBox pass" /></li>
                        <li><label></label><input type="submit" id="submitPassword" /></li></ul>
                </form>
            </div>
            <footer>
                <ul>
                    <li class="needHelp"> Need help? </li>
                    <li class="customerServiceOnline"> 
                        <a href="#" title="Click to contact Customer Services Online">Click</a>
                        <strong>Customer Service Online</strong> 
                    </li>
                    <li class="call">
                        <p>Call <a href="tel:1-800-125-9568">1-800-FCC-1 (1-800-125-9568)</a></p>
                    </li>
                    <li class="visit">
                        <p>Visit a <strong>FCC Branch</strong></p>
                    </li>
                </ul>
                <div id="copyright">
                    <hr />
                    Copyright © 2011. Franklin Capital Corporation. All rights reserved. <a href="">Terms of Use</a> | <a href="">Privacy Policy</a> 
                </div>
            </footer>
        </div>
            <script type="text/javascript">
            $(function(){
                $("input[type='radio']").each(function(){
                    var thisCheckbox = $(this);
                    var newCheckbox = $('<span class="checkbox"></span>');
                    if(thisCheckbox.is(':checked')){
                        newCheckbox.addClass('checked');
                    }

                    newCheckbox.click(function(){
                        thisCheckbox.click();
                        $("span.checkbox[name='"+thisCheckbox.attr('name')+"']").removeClass('checked');
                        $(this).addClass('checked');
                    });

                    thisCheckbox.change(function(){
                        newCheckbox.click();
                    });

                    newCheckbox.attr('name', thisCheckbox.attr('name'));
                    thisCheckbox.hide(0).after(newCheckbox);
                });



                $('select').each(function(){
                    var slideSpeed = 100;
                    var thisDropdown = $(this);
                    var thisSelectedText = $('option:selected', thisDropdown).text();

                    var newDropdownContainer = $('<div class="dropdown"><ul></ul></div>');
                    var newDropdownHeader = $('<div class="header">' +
                                                    '<strong>' + thisSelectedText + '</strong>' +
                                                    '<em></em>' +
                                                '</div>');

                    thisDropdown.hide(0).after(newDropdownContainer);
                    newDropdownContainer.prepend(newDropdownHeader);

                    thisDropdown.find('option').each(function(){
                        var thisOption = $(this);
                        var thisOptionText = thisOption.text();
                        var thisOptionValue = thisOption.val();

                        var newOption = $('<li value="' + thisOptionValue + '">' + thisOptionText + '</li>');

                        newOption.click(function(){
                            var thisVal = $(this).attr('value');
                            var thisText = $(this).text();
                            thisDropdown.val(thisVal).change();
                            newDropdownHeader.find('strong').text(thisText);
                            newDropdownContainer.find('ul').slideUp(slideSpeed)
                        });

                        newDropdownContainer.find('ul').append(newOption);
                    });

                    newDropdownHeader.click(function(){
                        var alreadyVisible = (newDropdownContainer.hasClass('top')) ? true : false;
                        $('div.dropdown').removeClass('top').find('ul').slideUp(slideSpeed);

                        if(!alreadyVisible){
                            newDropdownContainer.addClass('top').find('ul').slideDown(slideSpeed);
                        }
                    });

                    newDropdownContainer.find('ul li:last').addClass('last');

                });
            });
            </script>
    </body>
</html>